<template>
	<view class="">
		<view class="mainpadding_top ffffff ">
			<view class="flexbetween pdl" @click="show=true">
				<view class="xiaohei main_size">申报类型</view>
				<view class="flexright">
					<input type="text" class="xiaohei textright margin_right1 main_size" disabled=""
						placeholder="点击选择申报类型" v-model="baoxiao_typename" />
					<u-icon name="arrow-right" color="#333" size="16"></u-icon>
				</view>
			</view>
			<view class="flexbetween margin_top pdl" @click="csry">
				<view class="xiaohei main_size">抄送复核员</view>
				<view class="flexright">
					<input type="text" class="xiaohei textright margin_right1 main_size" disabled=""
						placeholder="点击选择抄送复核员" v-model="selectbqtext" />
					<u-icon name="arrow-right" color="#333" size="16"></u-icon>
				</view>
			</view>
			<view class="flexbetween pdl margin_top">
				<view class="xiaohei main_size">申报金额</view>
				<input type="number" class="xiaohei textright main_size" placeholder="请输入申报金额" v-model="price" />
			</view>
			<view class="pdl margin_top">
				<view class="xiaohei main_size">申报说明</view>
				<textarea placeholder="请输入申报说明" class="xiaohei margin_top main_size" v-model="des"
					style="width: 100%;height: 120rpx;"></textarea>
			</view>
			<view class="margin_top">
				<view class="xiaohei main_size">申报凭证上传</view>
				<view class="flexleft flex_wrap">
					<view class="sanshis flexcenter" v-for="(item,index) in images_text" :key="index">
						<view class="dingwei margin_top" style="width: 180rpx;height: 180rpx;">
							<image :src="item" class=" radius" style="width: 100%;height: 100%;" mode=""></image>
							<view class="deleteimg" @click="delindex(index,images,images_text)"></view>
						</view>
					</view>
					<view class="sanshis  flexcenter" @click="uploadImg(6,images,images_text)"
						v-if="images_text.length<6">
						<image src="@/static/tjtp.png" class="margin_top" style="width: 180rpx;height: 180rpx;" mode="">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="posibottom mainpadding">
			<view class="submitbtn" style="background-color: #c1282e;" @click="submit">确认提交</view>
		</view>
		<u-picker :show="show" :columns="columns" keyName="name" @confirm="confirm"></u-picker>
		<u-popup :show="ryshow" @close="ryshow=false">
			<view class="mainpadding ">
				<view class="mainpadding2 textcenter xiaohei main_size" style="padding-bottom: 0;">抄送复核员</view>
				<view class="flexleft flex_wrap">
					<view :class="item.ischeck?'lvbtn margin_right margin_top1':'huibtn margin_right margin_top1'"
						v-for="item in ryList" :key="item.id" @click="checkssbq(item)">{{item.username}}</view>
				</view>
				<view class="margin_top submitbtn" @click="ssbqListfn()">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				images: [],
				images_text: [],
				columns: [],
				show: false,
				baoxiao_typename: "",
				baoxiao_type_id: "",
				price: "",
				des: "",
				listid: "",
				ryshow: false,
				ryList: [],
				selectbqtext: ""
			}
		},
		onLoad(options) {
			if (options.id) {
				this.listid = options.id
				this.getDetail()
			} else {
				this.getry()
			}
			this.init()
		},
		methods: {
			csry() {
				if (this.listid) {
					httpRequest.toast("编辑不能修改抄送复核员")
					return false
				}
				this.ryshow = true
			},
			submit() {
				if (this.baoxiao_type_id == "") {
					httpRequest.toast("请选择申报类型")
					return false
				}
				if (this.selectbqtext == "") {
					httpRequest.toast("请选择抄送复核员")
					return false
				}
				if (this.price == "") {
					httpRequest.toast("请输入申报金额")
					return false
				}
				if (this.des == "") {
					httpRequest.toast("请输入申报说明")
					return false
				}
				if (this.image == "") {
					httpRequest.toast("请上传申报凭证")
					return false
				}

				let apply_data = []
				this.ryList.forEach(item => {
					if (item.ischeck) {
						apply_data.push({
							type: 1,
							user_id: item.id
						})
					}
				})
				let data = {
					baoxiao_type_id: this.baoxiao_type_id,
					price: this.price,
					des: this.des,
					image: this.images.join(),
					apply_data: apply_data
				}
				let url = "/api/baoxiao/addBaoxiao1"
				if (this.listid) {
					this.$set(data, "id", this.listid)
					url = "/api/baoxiao/editBaoxiao"
				}
				httpRequest.request(url, 'POST', data).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			checkssbq(item) {
				item.ischeck = !item.ischeck
			},
			ssbqListfn() {
				this.ryshow = false
				let arr = []
				this.ryList.forEach(item => {
					if (item.ischeck) {
						arr.push(item.username)
					}
				})
				this.selectbqtext = arr.length ? arr.join() : ""
			},
			confirm(e) {
				console.log(e);
				this.baoxiao_type_id = e.value[0].id
				this.baoxiao_typename = e.value[0].name
				this.show = false
			},
			getry(data) {
				httpRequest.request("/api/user/getApplyBxUser", 'GET', {
					type: 1
				}).then(res => {
					if (this.listid) {
						res.data.forEach(item => {
							this.$set(item, "ischeck", false)
							data.forEach(curr => {
								if (curr.user_id == item.id) {
									item.ischeck = true
								}
							})
						})
					} else {
						res.data.forEach(item => {
							this.$set(item, "ischeck", false)
						})
					}
					this.ryList = res.data
					this.ssbqListfn()
				})
			},
			getDetail() {
				httpRequest.request("/api/baoxiao/baoxiaoDetail", 'GET', {
					id: this.listid
				}).then(res => {
					let data = res.data
					this.baoxiao_typename = data.type.name
					this.baoxiao_type_id = data.type.id
					this.price = data.price
					this.des = data.des
					this.images = data.image.split(',')
					this.images_text = data.image_text
					this.getry(data.apply_data1)
				})
			},
			init() {
				httpRequest.request("/api/Baoxiao/baoxiaoTypeIndex", 'GET', {}).then(res => {
					this.columns.push(res.data)
				})
			},
			uploadImg(value, upImgs, upImgs_text) { //上传图片
				let _this = this;
				let num = Number(value) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			delindex(index, upImg, upImgs_text) {
				upImg.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(res.url)
					upImgs_text.push(image_item);
					console.log(res);
					console.log(upImgs_text);
				}).catch(err => {});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.lvbtn {
		background: #DFFFED;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 10rpx 15rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #fff;
		background-color: #c1282e;
	}

	.huibtn {
		background: #F9F9F9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 10rpx 15rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
	}
</style>